<template>
	<view>
		<view class="car-tatos">
			<view class="add-top-car" v-if="carShow">
				<image class="car-icon" :src="bg_image.my1" mode="aspectFit"></image>
				<view>{{title}}</view>
			</view>
			<view class="number">
				<view class="number-grid" :class="{'number-grid-active': activeIndex == index}" v-for="(item, index) in numlist" :key="index" @click="openKeyboard(index)">
					{{item||''}}
					<view v-if="index == 7"
						:class="[
							{'new-number': index == 7},
							{'new-number-active': activeIndex == 7 || activeIndex == 8}
						]">
						新能源</view>
				</view>
			</view>
			<view v-if="!onlyInput && phonenum" class="carPhone">
				<view class="phone">
					<view>手机号</view>
					<input class="phone-1" @input="changePhone" v-model="phonenum" disabled type="number"
						placeholder="请输入您的手机号" />
				</view>
				<view class="code">
					<view>验证码</view>
					<input class="code-1" type="number" v-model="smsCode" @input="changeCode" placeholder="请输入验证码" />
					<view class="getCode">
						<!-- <text v-if="!isshow" @click="send">获取验证码</text>
						<text v-else>{{time}}秒重新获取</text> -->
					</view>
				</view>
			</view>
			<button class="confirm-button" @click="submitNumber">{{btnText}}</button>
		</view>
		<view class="keyboard" v-if="KeyboardState">
			<view class="keyboardClose">
				<view class="keyboardClose_btn" @click='closeKeyboard'>完成</view>
			</view>
			<!-- 省份简写键盘 -->
			<view class="keyboard-item" v-if="activeIndex == 0">
				<view class="keyboard-line" :class="[(numbers.length - 1) === index ? 'keybard-flex' : '']"
					v-for="(item,index) in provinces" :key="index">
					<view class="keyboard-btn" v-for="son in item" @click='bindChoose(son)'>{{son}}</view>
					<view class="keyboard-del" @click='bindDelChoose' v-if="(numbers.length - 1) === index">
						<image style="width: 135rpx;height: 97rpx;" :src="bg_image.del"></image>
					</view>
				</view>
			</view>
			<!-- 车牌号码选择键盘 -->
			<view class="keyboard-item" v-else>
				<view class="keyboard-line" :class="[(numbers.length - 1) === index ? 'keybard-flex' : '']" v-for="(item, index) in numbers" :key="index">
					<view v-for="son in item" :key="son">
						<view
							v-if="(activeIndex >= 1 && activeIndex <= 5) && (son === '警' || son === '学' || son === '港' || son === '澳')"
							class="keyboard-btn forbid" :id="son">{{son}}
						</view>
						<view v-else class="keyboard-btn" @click='bindChoose(son)'>{{son}}</view>
					</view>
					<view class="keyboard-del" v-if="(numbers.length - 1) === index" @click='bindDelChoose'>
						<image style="width: 135rpx;height: 97rpx;" :src="bg_image.del"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { PROVINCES, PLATE_NUMBERS} from './config.js'
import { bg_image } from "../../js/indoorConfig.js";
export default {
	props: {
		onlyInput: Boolean,
		carShow: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '添加车辆'
		},
		btnText: {
			type: String,
			default: '确定'
		}
	},
	data() {
		return {
			bg_image,
			provinces: PROVINCES,
			numbers: PLATE_NUMBERS,
			carnum: '',
			KeyboardState: false,
			phonenum: '', //手机号
			plateNumber: '', //车牌号
			smsCode: '', //手机验证码 
			time: 60, // 获取验证码倒计时
			isshow: false,
			explain: '普通车辆',
			activeColor: '#0072FF',
			activeBG: 'linear-gradient(180deg, #00C6FF, #0072FF)',
			activeIndex: 0,
			showNew: false,
			numlist: []
		}
	},
	mounted() {
		this.numlist = new Array(8)
	},
	methods: {
		initData(data) {
			if (data == '') return
			let numlist = data && data.split('') ? data.split('') : []
			let showNews = false
			if (numlist.length == 7) {
				numlist.push('')
			}
			this.numlist = numlist
			this.showNew = showNews
			this.activeIndex = numlist.length - 1
		},
		changeColor(event) {
			if (event.detail.value.length == 8) {
				this.explain = '新能源',
				this.activeColor = '#00A213',
				this.activeBG = 'linear-gradient(180deg, #00EA58, #00A213)'
			} else {
				this.explain = '普通车辆',
				this.activeColor = '#0072FF',
				this.activeBG = 'linear-gradient(180deg, #00C6FF, #0072FF)'
			}
			this.carnum = event.detail.value
			if (this.onlyInput) {
				this.$emit("transfer", {
					value: event.detail.value.toUpperCase(),
					selectCartList: this.numlist
				})
			}
		},
		
		/* 验证码输入 */
		changeCode(e) {
			console.log(111, e)
			// this.smsCode = e.detail.value
		},

		/* 手机号输入 */
		changePhone(e) {
			console.log(111, e)
				// this.data.phonenum = e.detail.value
		},
		/* 选中点击设置 */
		bindChoose(e) {
			if (this.carnum.length > 7 && this.activeIndex > 7) return
			if ((this.activeIndex >= 1 && this.activeIndex <= 5) && (e === '警' || e === '学' || e === '港' || e === '澳')) return
			if (this.activeIndex > 7) return

			this.numlist[this.activeIndex] = e
			this.activeIndex++
			
			this.numlist = this.numlist,
			this.activeIndex = this.activeIndex
			this.changeColor({
				detail: {
					value: this.numlist.join('')
				}
			})
			this.$emit("inputData", this.numlist.join(''))
		},


		bindDelChoose() {
			// 先判断当前位置是否有数据，有数据就删除，没数据就删除上一个
			if (this.numlist[this.activeIndex]) {
				this.numlist[this.activeIndex] = null
				this.carnum = this.numlist.join(''),
				this.numlist = this.numlist
				if (this.onlyInput) {
					this.$emit("transfer", {
						value: this.carnum.toUpperCase(),
						selectCartList: this.numlist
					})
				}
				return
			}
			this.numlist[this.activeIndex - 1] = null
			if (this.activeIndex) {
					this.activeIndex--
			}
			this.carnum = this.carnum.slice(0, -1),
			this.numlist = this.numlist,
			this.activeIndex = this.activeIndex
			if (this.onlyInput) {
				this.$emit("transfer", {
					value: this.carnum.toUpperCase(),
					selectCartList: this.numlist
				})
			}
		},


		closeKeyboard() {
			this.KeyboardState = false
			this.$emit("chidshow", true)
		},
		show() {
			this.KeyboardState = true,
			this.phonenum = wx.getStorageSync('userInfo').phonenum
		},
		hide() {
			this.KeyboardState = false
		},
		openKeyboard(index) {
			this.KeyboardState = true,
			this.activeIndex = index
			this.$emit("chid", true)
		},
		/* 发送验证码 */
		send() {
			return
			let that = this
			/* 验证是否输入手机号*/
			if (!checkPhone(this.phonenum)) {
				uni.showToast({title: '手机号格式错误',icon:'none' })
				return
			}

			/* 验证是否输入车牌号*/
			if (!this.carnum) {
				uni.showToast({
					title: '请输入车牌号',
					icon: 'none'
				})
				return
			}

			/* 验证是否正确输入车牌号*/
			
			if (this.data.carnum.length < 7) {
				uni.showToast({
					title: '请正确输入车牌号',
					icon: 'none'
				})
				return
			}
		},
		showNewF() {
			this.numlist.push('')
			this.showNew = true,
			this.numlist = this.numlist
		},
		clearData() {
			let initNumlist = new Array(8)
			this.activeIndex = 0,
			this.carnum = '',
			this.numlist = initNumlist,
			this.showNew = false,
			this.smsCode = ''
		},
		// 提交车牌号码
		submitNumber() {
			// 触发父组件方法
			this.$emit("confire", {
				phonenum: this.phonenum,
				smsCode: this.smsCode,
				plateNumber: this.carnum.toUpperCase()
			})
		}
	}
}
</script>

<style lang="less">
@import url("./index.less");
</style>